<template>
  <div>
    <div style="height:60px;width:199px;">
        <span style="font-size:28px;">首页</span>
    </div>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="getFoldFlag"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-shopping-bag-1"></i>
          <span slot="title">产品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="skipRouter('/productList')">产品列表</el-menu-item>
          <el-menu-item index="1-2" @click="skipRouter('/productClassList')">产品类目</el-menu-item>
          <el-menu-item index="1-3" @click="skipRouter('/addProduct')">添加产品</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span slot="title">客户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="skipRouter('/customerManage')">客户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-data-line"></i>
          <span slot="title">营销策略</span> 
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-4" @click="skipRouter('/dataAnalyze')">数据分析</el-menu-item>
          <el-menu-item index="3-1" @click="skipRouter('/promotionList')">促销活动</el-menu-item>
          <el-menu-item index="3-5" @click="skipRouter('/promotionList')">打折活动</el-menu-item>
          <el-menu-item index="3-2" @click="skipRouter('/couponList')">优惠卷</el-menu-item>
          <el-menu-item index="3-3" @click="skipRouter('/receiveCouponList')">优惠卷领取</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" @click="skipRouter('/orderList')">订单列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">运营服务</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">行业动态管理</el-menu-item>
          <el-menu-item index="5-2">热点资讯管理</el-menu-item>
          <el-menu-item index="5-3">热点话题管理</el-menu-item>
          <el-menu-item index="5-3">防伪追溯管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-phone"></i>
          <span slot="title">其他综合</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1">在线客服</el-menu-item>
          <el-menu-item index="6-2">投诉建议</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      
    </el-menu>
  </div>
</template>

<script>
/**
 * 左侧导航栏
 */
import { mapGetters } from 'vuex';
export default {
    data() {
      return {
        isCollapse: false
      };
    },
    computed:{
      ...mapGetters(["getFoldFlag"]),
    },
    methods: {
        handleOpen:function(key, keyPath) {
          //console.log(key, keyPath);
        },
        handleClose:function(key, keyPath) {
          //console.log(key, keyPath);
        },
        openOrClose:function(){
            this.isCollapse = !this.isCollapse;
        },
        skipRouter:function(path){
           this.$router.push(path);
        },
    },
    created() {

    }
}
</script>

<style scoped>
.el-menu {
    border-right:#545c64;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>